<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="icon" type="image/png" href="img/favicon.ico">
	<title>Tools Collection</title>
	<link rel="stylesheet" href="../layui/css/layui.css">
	<script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="../static/echarts@5.3.3/echarts.js"></script>
</head>

<body>
	<div class="layui-nav top layui-bg-green">
		<div>
			<a href="/"><img src="../static/img/logolh.png" alt="logo" style="height: 62px;"></a>
		</div>
		<div style="margin-left:50px;">
			<ul>
				<li class="layui-nav-item layui-this">
					<a href="javascript:;" style="font-size: 20px;">曲线</a>
					<dl class="layui-nav-child">
						<dd><a href="/file2hex">文件转HEX</a></dd>
						<dd><a href="/delete_note">删除注释</a></dd>
						<dd><a href="/img2bin">图片转bin</a></dd>
						<dd><a href="/chart">曲线</a></dd>
						<dd><a href="/ttf2bin">字体生成bin</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:;" style="font-size: 20px;">预留</a>
					<dl class="layui-nav-child">
						<dd><a href="">预留</a></dd>
						<dd><a href="">预留</a></dd>
						<dd class="layui-this"><a href="">预留</a></dd>
						<dd><a href="">预留</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item"><a href="http://git.armcloudiot.com/" style="font-size: 20px;">mygit</a></li>
				<li class="layui-nav-item"><a href="http://cloudreve.armcloudiot.com/" style="font-size: 20px;">云盘</a>
				</li>
				<li class="layui-nav-item"><a href="http://leanote.armcloudiot.com/" style="font-size: 20px;">云笔记</a>
				</li>
			</ul>
		</div>
	</div>

	<textarea name="receive" placeholder="输入数据" class="layui-textarea"
		style="height:20%;width:70%;margin-left:50px;margin-top:50px;border:1px solid #0990D2;border-radius:10px;padding:10px;"
		id="input1">
2120,1960,145
2120,1960,145
2120,1960,303
		</textarea>

	<div style="margin-top: 15px; margin-left:50%">
		<button type="button" class="layui-btn" id="btn1">
			<i class="layui-icon">&#xe67c;</i>更新曲线</button>
		<button type="button" class="layui-btn" id="btn3">
			<i class="layui-icon">&#xe67c;</i>重启设备</button>
		<button type="button" class="layui-btn" id="btn2">
			<i class="layui-icon">&#xe67c;</i>上传文件</button>
	</div>

	<div id="container" style="height: 70%; width: 80%; margin-top: 50px;"></div>

	<div hidden="hidden">
		<input id="ws" value={{.ws}} />
	</div>
</body>

<style>
	.top {
		display: flex;
		margin: auto;
	}

	.layui-form-checkbox[lay-skin=primary] {
		height: 25px !important;
		line-height: normal !important;
		min-width: 18px;
		min-height: 18px;
		border: none !important;
		margin-right: 0;
		padding-left: 28px;
		padding-right: 0;
		background: 0 0
	}
</style>

<script type="text/javascript">
	layui.use('element', function () {
		var element = layui.element;
		//一些事件监听
		element.on('tab(demo)', function (data) {

		});
	});

	layui.use(['layer', 'form'], function () {
		var layer = layui.layer;
		var form = layui.form;
		var $ = layui.$;
		var $ = layui.jquery,
			element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

		var wsaddr = $("#ws").val();
		var ws = new WebSocket(wsaddr);
		console.log(ws);

		ws.onopen = function (evt) {
			console.log("Connection open ...");
		};

		ws.binaryType = 'arraybuffer';

		ws.onerror = function (error) {
			layer.msg('WebSocket error');
		};

		ws.onclose = function (evt) {
			console.log("Connection closed.");
		};

		ws.onmessage = function (evt) {
			const uint8Array = new Uint8Array(event.data);
			if (uint8Array[0] == 1) {
				//uint8Array[1]后的数据转成utf8字符串
				var decoder = new TextDecoder("utf-8");
				var str = decoder.decode(uint8Array.slice(1));
				titles = str.split(",");

				console.log(titles);
				refresh_title(titles);
			} else if (uint8Array[0] == 2) {
				var decoder = new TextDecoder("utf-8");
				var str = decoder.decode(uint8Array.slice(1));
				// console.log(str);
				addDataToChart(str);
			}


			// const hexString = uint8ArrayToHex(uint8Array, { spaced: true, upperCase: true });
			// document.getElementById("receiveContent").value += hexString + " ";
		};


		$("#btn1").click(function () {
			$.ajax({
				url: "/chartsend",
				type: "POST",
				dataType: "text",
				success: function (rsp) {
					var str = rsp;
					var strn = str.split("\r\n");

					if (rsp) {
						$("#input1").val(rsp); // 更新#Content的值
					}

					var seriesData = [];
					titles = strn[0].split(",");

					for (let i = 1; i < strn.length; i++) {
						var strn1 = strn[i].split(",");
						for (let j = 0; j < titles.length; j++) {
							if (seriesData[j] === undefined) {
								seriesData[j] = { name: titles[j], data: [] };
							}
							seriesData[j].data.push(strn1[j]);
						}
					}
					console.log(seriesData);
					refresh_data(seriesData);

					layer.msg("更新完成");
				}
			});
		});

		$("#btn3").click(function () {
			$.ajax({
				url: "/restartPost",
				type: "POST",
				dataType: "text",
				success: function (rsp) {

				}
			});
		});

		$("#btn2").click(function () {
			var str = $("#input1").val();
			var strn = str.split(",");
			var strn1 = str.split("\n");

			data1 = [];
			data2 = [];
			data3 = [];
			data4 = [];

			for (let i = 0; i < strn1.length; i++) {
				var strn = strn1[i].split(",");
				data1.push(strn[0]);
				data2.push(strn[1]);
				data3.push(strn[2]);
				data4.push(strn[3]);
			}

			refresh_data(0, data1);
			refresh_data(1, data2);
			refresh_data(2, data3);
			refresh_data(3, data4);
		});
	});
</script>

<script>
	var dom = document.getElementById('container');
	var myChart = echarts.init(dom, null, {
		renderer: 'canvas',
		useDirtyRect: false
	});
	var app = {};
	let charts_data = [];
	var globalDataStore = {};
	let titles = [];
	var option;

	option = {
		title: {
			text: 'chart'
		},
		tooltip: {
			trigger: 'axis',
			position: function (pt) {
				return [pt[0], '10%'];
			}
		},
		legend: {
			data: []
		},
		xAxis: {
			type: 'category',
		},
		yAxis: {
			type: 'value'
		},
		dataZoom: [{
			type: 'inside',
			start: 0,
			end: 100
		}, {
			start: 0,
			end: 20
		}],
		series: []
	};
	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
	window.addEventListener('resize', myChart.resize);

	function refresh_data(seriesData) {
		if (!myChart) {
			return;
		}

		// var option = myChart.getOption();

		// 清空原有数据
		option.series = [];
		option.legend.data = [];

		// 动态添加数据
		for (var i = 0; i < seriesData.length; i++) {
			option.series.push({
				name: seriesData[i].name,
				type: 'line',
				smooth: true,
				data: seriesData[i].data
			});
			option.legend.data.push(seriesData[i].name);
		}

		myChart.setOption(option);
	}

	function addDataToChart(dataPoint) {
		if (!myChart || !option) {
			console.error('ECharts instance or option is not defined.');
			return;
		}

		var data = dataPoint.split(",");
		if (data.length !== titles.length) {
			console.error('The data point does not match the number of titles.');
			return;
		}

		charts_data.push(data[1]);

		myChart.setOption({
			series: [
				{
					name: titles[1],
					type: 'line',
					showSymbol: false,
					data: charts_data
				}
			]
		});

		// for (var i = 0; i < titles.length; i++) {
		// 	var title = titles[i];
		// 	// var seriesData = globalDataStore[title];

		// 	console.log(data[i]);

		// 	option.series.push({
		// 		name: titles[i],
		// 		type: 'line',
		// 		smooth: true,
		// 		data: data[i]
		// 	});
		// 	option.legend.data.push(titles[i]);
		// 	// seriesData.push(data[i]);

		// 	// // 更新选项中的series数据
		// 	// option.series[i].data = seriesData.slice(); // 使用slice()创建副本，避免直接操作全局数据
		// }

		// // 更新图表
		// myChart.setOption(option);
	}


	function refresh_title(titles) {
		if (!myChart) {
			return;
		}

		// 清空原有数据
		option.series = [];
		option.legend.data = [];

		for (var i = 0; i < titles.length; i++) {
			option.series.push({
				name: titles[i],
				type: 'line',
				smooth: true,
				data: ""
			});
			option.legend.data.push(titles[i]);
		}
		myChart.setOption(option);
	}

	// setInterval(function () {
	//   for (var i = 0; i < 5; i++) {
	//     // data.shift();
	//     charts_data.push(12);
	//   }
	//   myChart.setOption({
	//     series: [
	//       {
	//         name: 'Fake Data',
	//         type: 'line',
	//         showSymbol: false,
	//         data: charts_data
	//       }
	//     ]
	//   });
	// }, 1000);

</script>

</html>